<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="photos/UncleKevin icon.png">
    <title>UncleKevin 支付台</title>
    <link rel="stylesheet" href="css/7-支付页.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="top">
        <div class="container">
            <ul class="top-left">
                <div class="download"><li style="color: #99999962;"><a href="">客户端下载&nbsp;</a></li></div>
                <div class="log-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html">登录</a></li></div>
                <div class="sign-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html" style="color:#f26704;">注册</a></li></div>
                <script>
                    $(".log-in").hover(
                        function(){
                        $(".log-in a").css({"margin-left":"40px",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".log-in a").css({"font-weight":"normal",
                                            "margin-left":"24px",});
                        }
                    );
                    $(".sign-in").hover(
                        function(){
                        $(".sign-in a").css({"font-weight":"bold",
                                            "margin-left":"38px"});
                        },
                        function(){
                        $(".sign-in a").css({"font-weight":"normal",
                                            "margin-left":"24px"});
                        }
                    );
                    $(".download").hover(
                        function(){
                        $(".download a").css({"color":"#f26704",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".download a").css({"font-weight":"normal",
                                            "color":"#888888",});
                        }
                    );
                </script>
            </ul>
            <ul class="top-right">
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/10-我的订单.html">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html">购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">收藏夹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li><a href="">联系客服</a></li>
            </ul>
        </div>
    </div>
    <div class="top-Menu">
        <div class="container">
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/1-首页.html"><img class="logo1" src="https://i.loli.net/2021/01/31/VlOCJo75ZI61uYd.png"></a>            
        </div>
        <div class="shoppingcar">收银台</div>
    </div>
    <div class="middle">
    </div>
    <div class="container container-middle">
        <div class="main-top">
            <img src="https://i.loli.net/2021/02/21/Sd7zeHOJxFs3M8b.jpg" style="float:left;  max-width: 15px;margin-top: 30px;margin-left: 50px;" alt="">
            <img src="https://i.loli.net/2021/02/21/OPez9tTUGEZdg6B.jpg" style="float:left; max-width: 30px;margin-top: 22px;margin-left: 70px;" alt="">
            <h1 class="ABC">中国农业银行</h1>
            <h2 class="Number-ABC">**7271</h2>
            <h3 class="classify">储蓄卡 ｜ 快捷 </h3>
            <h4 class="pay1">支付</h4>
            <h5 class="pay2">999.99</h5>
            <h6 class="pay3">元</h6>
        </div>
        <div class="main-middle">
            <a href=""><div class="other-payment">其他付款方式</div></a>
            <a href=""><div class="add-payment">添加银行卡/快捷支付</div></a>
        </div>
        <div class="checkedCode">
            <h1 class="title-password">支付密码 &nbsp;&nbsp;: </h1>
            <div class="getCodeMsg">
                <input class="input-1" type="tel" maxlength="1" name="code" pattern="[0-9]*" />
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
                <input type="tel" maxlength="1" name="code" pattern="[0-9]*"/>
            </div>
            <script>
                $(document).ready(function(){
                    $(".input-1").focus();
                });
                $('.getCodeMsg input').keyup(function (event) {
                // 删除往前 添加往后
                if($(this).index()<6) {
                if(event.keyCode==46 || event.keyCode==8) {
                $(this).prev('input').focus();
                }else {
                $(this).next('input').focus();
                }
                }
             })
            </script>
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html" class="forget-password">忘记密码？</a>
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/8-支付成功页.html"><div class="pay">确认支付</div></a>
        </div>
    </div>
    <img style="margin-left: 500px;margin-top: 55px;" src="https://i.loli.net/2021/02/21/TAL3IDyZ4i5YbXK.png" alt="">
</body>
</html>